import {PageContainer} from '@ant-design/pro-layout';
import {G2, Line} from '@ant-design/charts';
import React, {useEffect, useState} from 'react';
import ProCard, {Statistic, StatisticCard} from "@ant-design/pro-card";
import "./index.css"
import RcResizeObserver from "rc-resize-observer";
import {getTransactionList} from "@/services/ant-design-pro/statistics";

const TransactionStatistics: React.FC = () => {
	const [responsive, setResponsive] = useState(false);
	const [transactionData,setTransactionData ] = useState({});
	const imgStyle = {
		display: 'block',
		height: 36,
		width: 36,
	};
	useEffect(async () => {
		let arr = await  getTransactionList()
		console.log(arr , '1211321231131');
		setTransactionData(arr)
	},[])
	G2.registerShape('point', 'breath-point', {
		draw: function draw(cfg, container) {
			var data = cfg.data;
			var point = {
				x: cfg.x,
				y: cfg.y,
			};
			var group = container.addGroup();
			if (data.time === '14.20' && data.date === 'today') {
				var decorator1 = group.addShape('circle', {
					attrs: {
						x: point.x,
						y: point.y,
						r: 10,
						fill: cfg.color,
						opacity: 0.5,
					},
				});
				var decorator2 = group.addShape('circle', {
					attrs: {
						x: point.x,
						y: point.y,
						r: 10,
						fill: cfg.color,
						opacity: 0.5,
					},
				});
				var decorator3 = group.addShape('circle', {
					attrs: {
						x: point.x,
						y: point.y,
						r: 10,
						fill: cfg.color,
						opacity: 0.5,
					},
				});
				decorator1.animate(
					{
						r: 20,
						opacity: 0,
					},
					{
						duration: 1800,
						easing: 'easeLinear',
						repeat: true,
					},
				);
				decorator2.animate(
					{
						r: 20,
						opacity: 0,
					},
					{
						duration: 1800,
						easing: 'easeLinear',
						repeat: true,
						delay: 600,
					},
				);
				decorator3.animate(
					{
						r: 20,
						opacity: 0,
					},
					{
						duration: 1800,
						easing: 'easeLinear',
						repeat: true,
						delay: 1200,
					},
				);
				group.addShape('circle', {
					attrs: {
						x: point.x,
						y: point.y,
						r: 6,
						fill: cfg.color,
						opacity: 0.7,
					},
				});
				group.addShape('circle', {
					attrs: {
						x: point.x,
						y: point.y,
						r: 1.5,
						fill: cfg.color,
					},
				});
			}
			return group;
		},
	});
	const [data, setData] = useState([]);
	useEffect(() => {
		asyncFetch();
	}, []);
	const asyncFetch = () => {
		fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
			.then((response) => response.json())
			.then((json) => setData(json))
			.catch((error) => {
				console.log('fetch data failed', error);
			});
	};
	var config = {
		data: data,
		xField: 'year',
		yField: 'gdp',
		seriesField: 'name',
		yAxis: {
			label: {
				formatter: function formatter(v) {
					return ''.concat((v / 1000000000).toFixed(1), ' B');
				},
			},
		},
		legend: { position: 'top' },
		smooth: true,
		animation: {
			appear: {
				animation: 'path-in',
				duration: 5000,
			},
		},
	};

	var config1 = {
		// autoFit: true,
		height: 150,
		data: data,
		meta: {
			cpu: {
				time: {type: 'cat'},
				max: 100,
				min: 0,
			},
		},
		xField: 'time',
		seriesField: 'date',
		tooltip: {showMarkers: false},
		point: {shape: 'breath-point'},
	};
	return (
		<PageContainer>
			<ProCard direction="row" split="vertical" className="card">
				<ProCard colSpan={12} title="今日订单金额" className="today_price">
					<h3  className="price">￥ 121212</h3>
					<Line {...config1} />
				</ProCard>
				<ProCard colSpan={6} title="今日订单人数1" >
					<Statistic className="yesday" title="昨日: 一日环比" value="825.04%" trend="up"/>
					<Line {...config1} />
					<div className="orderNumber">本月支付人数 25</div>
					<Statistic className="upMouth" title="上月: 23月环比" value="8.04%" trend="up"/>
				</ProCard>
				<ProCard colSpan={6} title="今日支付人数1" >
					<Statistic className="yesday" title="昨日: 一日环比" value="825.04%" trend="down"/>
					<Line {...config1} />
					<div className="orderNumber">本月支付人数 25</div>
					<Statistic className="upMouth" title="上月: 23月环比" value="8.04%" trend="up"/>
				</ProCard>
			</ProCard>

			<ProCard style={{marginTop: 8}} title="交易概况"
					 tooltip="这是提示">
				<RcResizeObserver
					key="resize-observer"
					onResize={(offset) => {
						setResponsive(offset.width < 400);
					}}
				>
					<StatisticCard.Group direction={responsive ? 'column' : 'row'}>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>营业额</h3>),
							value: 4567,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/transactionIcon/yye.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="down"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>交易毛利金额</h3>),
							value: 4567,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/transactionIcon/jymll.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="up"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>商品支付金额</h3>),
							value: 551452,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/transactionIcon/spzfje.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="down"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>购买会员金额</h3>),

							value: 551452,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/transactionIcon/gmhyje.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="up"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>充值金额</h3>),
							value: 56252,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/transactionIcon/czje.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="up"/>,
						}}/>
					</StatisticCard.Group>

					<StatisticCard.Group direction={responsive ? 'column' : 'row'}>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>线下收银金额</h3>),
							value: 200,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/transactionIcon/xxsyje.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="up"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>支出金额</h3>),

							value: 50000,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/transactionIcon/zcje.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h3>环比增长</h3>} value="8.04%" trend="down"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>余额支付金额</h3>),

							value: 4545156,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/transactionIcon/yezfje.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="up"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>支付佣金金额</h3>),
							value: 0,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/transactionIcon/zfyjje.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="-8.04%" trend="down"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>商品退款金额</h3>),
							value: 4545156,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/transactionIcon/sptkje.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="up"/>,
						}}/>
					</StatisticCard.Group>
				</RcResizeObserver>
				 <Line {...config}  style={{marginTop:'20px'}}/>;
			</ProCard>
		</PageContainer>
	);
};

export default TransactionStatistics;


